<template>
  <div class="connect">
    <header>
      <p><span>退款申请</span></p>
      <button class="btnNews">刷新</button>
    </header>
    <section>
      <div class="btnbiao">
        <span><el-button type="primary" plain @click="allStaffAllocation">全部申请[{{ this.status }}]</el-button></span>
        <span><el-button type="primary" plain color="white" @click="pending">待处理[{{ this.status1 }}]</el-button></span>
        <span><el-button type="primary" plain color="white" @click="agreed">已同意[{{ this.status2 }}]</el-button></span>
        <span><el-button type="primary" plain color="white" @click="rejected">已拒绝[{{ this.status3 }}]</el-button></span>
      </div>
      <el-collapse v-model="activeNames" class="chaxun" style="border: 1px solid #e4e4e4;">
        <el-collapse-item title="筛选查询" name="1" class="title">
          <div class="chaxun1">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item label="关键词：">
                <el-input v-model="keyWords" placeholder="订单编号"></el-input>
              </el-form-item>
              <el-form-item label="收货人：">
                <el-input v-model="consignee" placeholder="用户账号/手机号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm">筛选</el-button>
                <el-button @click="resetForm">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
      </el-collapse>
    </section>
    <!-- 退款详情表 -->
    <section class="sectionTab">
      <div class="tabContent">
        <div class="tabTitle">
          <span>数据列表</span>
          <ul>
            <el-button @click="delClick" type="danger" style="margin-left: 20px">批量删除</el-button>
          </ul>
        </div>
        <el-table :data="tableData" border style="width: 100% " @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="序号" pops="refundId" width="80">
            <template slot-scope="scope">
              {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
            </template>
          </el-table-column>
          <el-table-column prop="orderNumber" label="订单编号" width="140">
          </el-table-column>
          <el-table-column prop="applyTime" label="申请时间" value-format="yyyy-MM-dd" sortable width="200">
          </el-table-column>
          <el-table-column prop="userName" label="用户账号" width="140">
          </el-table-column>
          <el-table-column prop="refundAmount" label="退款金额" width="140">
          </el-table-column>
          <el-table-column label="申请状态" width="160">
            <template slot-scope="scope">
              <span style="color: #66B1FF;" v-if="scope.row.refundSts == 1">待审核</span>
              <span style="color: #1CB99A;" v-if="scope.row.refundSts == 2">同意</span>
              <span style="color: red;" v-if="scope.row.refundSts == 3">不同意</span>
            </template>
          </el-table-column>
          <el-table-column prop="handelTime" label="处理时间" sortable width="200">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" id="chakanxianqing"><router-link style="color: #409EFF;" :to="{
                name: 'OrderRefundPending',
                params: {
                  id: scope.row.refundId,
                  state: scope.row.refundSts,
                },
              }">查看详情</router-link></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :total="count" background
        layout="prev, pager, next">
      </el-pagination>
    </section>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "OrderRefund",
  data() {
    return {
      activeNames: ['1'],
      refundList: [],
      // 以下是自带的
      tableData: [],
      options1: [
        {
          value: "1",
          label: "按申请时间倒序排列",
        },
        {
          value: "2",
          label: "按申请时间顺序排列",
        },
        {
          value: "3",
          label: "按处理时间倒序排列",
        },
        {
          value: "4",
          label: "按处理时间顺序排列",
        },
      ],
      status1: 0,
      status2: 0,
      status3: 0,
      status: 0,
      value: "",
      refundSts: 0,
      multipleSelection: "",
      currentPage: 1,
      pageSize: 10,
      keyWords: "",
      count: 0,
      consignee: "",
      submissionTime: "",
    };
  },
  created() {
    this.getList()
    this.getRefundCount()
  },

  computed: {},
  methods: {
    ...mapActions("order", ["getAllRefund", "delAllRejected", "getcount"]),
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log("fenye", val);
      this.getList()

    },
    //筛选
    submitForm() {
      this.getList()
    },
    //获取被选中的框
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },

    delClick() {
      //2. 提示用户是否批量删除
      this.$confirm("此操作将永久删除所选数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //3. 判断数组长度
          if (this.multipleSelection.length == 0) {
            return;
          }
          // 1. 判断是否有不是已拒绝的数据
          let arr = this.multipleSelection.filter((item) => {
            return item.refundSts != 3;
          });
          if (arr.length != 0) {
            //提示必须都是已拒绝
            this.$message({
              showClose: true,
              message: "删除内容必须为已拒绝的申请",
            });
            return;
          }
          // 4. 处理数据，将选中的数据，自取id放到一个数组中
          let ids = this.multipleSelection.map((item) => {
            return item.refundId;
          });
          console.log('要摧残', ids);

          // 5. 调用发送到后台的接口
          this.delAllRejected({ ids }).then((data) => {
            //重新调取渲染页面
            console.log("delAllRejected", data);
            this.getList()
          });
          //提示
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //渲染列表
    getList() {
      console.log("被调用了");
      let pageSize = this.pageSize;
      let currentPage = this.currentPage;
      let orderId = this.keyWords;
      let userName = this.consignee;
      let refundSts = this.refundSts
      let handelTime = this.submissionTim;
      this.getAllRefund({ currentPage, pageSize, orderId, userName, refundSts }).then((data) => {
        this.count = Number(data.count);
        this.tableData = data.data;
      });
    },
    //点击重置
    resetForm() {
      this.keyWords = ''
      this.consignee = ''
      this.refundSts = 0
      this.getList()
    },
    //点击显示全部数据
    allStaffAllocation() {
      this.refundSts = 0
      this.getList()
    },
    // 点击显示待处理
    pending() {
      this.refundSts = 1
      this.getList()
    },
    //点击显示已同意
    agreed() {
      this.refundSts = 2
      this.getList()
    },
    //已拒绝
    rejected() {
      this.refundSts = 3
      this.getList()
    },
    getRefundCount() {
      this.getcount().then(data => {
        console.log("统计的数据", data.data.status1);
        this.status1 = data.data.status1
        this.status2 = data.data.status2
        this.status3 = data.data.status3
        this.status = data.data.status1 + data.data.status2 + data.data.status3
      })
    }
  },

  mounted() { },
};
</script>
<style scoped>
.chaxun1 {
  width: 95%;
  margin: 30px auto;
}

header {
  height: 50px;
  position: relative;
  line-height: 50px;
  background-color: #f2f2f2;
  padding-left: 2.5%;
  margin-bottom: 30px;
}

header p {
  position: absolute;
  font-size: 18px;
  font-weight: 400;
}

header span {
  border-left: 6px solid #1cb09a;
  padding-left: 20px;
}

header .btnNews {
  position: absolute;
  top: 6px;
  right: 2.5%;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: #1cb09a;
  color: #fff;
  border: none;
}

section {
  margin-top: 30px;
  width: 95%;
  margin: 0 auto;
}

.connect section:nth-child(1) div:first-child {
  margin-bottom: 30px;
}

section span {
  vertical-align: middle;
}

section .el-tag {
  margin-right: 20px;
  padding: 2px 10px;
  margin-bottom: 30px;
}

.search ul {
  overflow: hidden;
  margin-right: 50px;
}

.search ul li {
  float: left;
  width: 20%;
}

.search ul li div {
  display: inline-block;
}

.el-input {
  display: inline-block;
}

/* .chaxun1 {
  margin-top: 14px;
} */

/* ::v-deep .el-collapse-item__header {
  background-color: #f0f0f0;
  padding-left: 18px;
}

::v-deep .el-collapse-item__wrap {
  padding-left: 20px;
} */

::v-deep .el-collapse-item__content {
  padding: 0;

}

.el-form-item {
  margin-right: 20px;
}

/* .el-button {
  margin-left: 30px;
  display: inline-block;
  height: 40px;
  width: 80px;
  background-color: #1cb09a;
  padding: 8px 12px;
} */
.sectionTab {
  background-color: #f2f2f2;
  margin-top: 40px;
}

.tabContent {
  margin-left: px;
}

.tabTitle {
  position: relative;
  height: 50px;
  line-height: 50px;
  background-color: #f2f2f2;
  padding-left: 16px;
}

.tabTitle ul {
  overflow: hidden;
  position: absolute;
  right: 30px;
  top: 0;
}

.tabTitle ul li {
  float: left;
  text-decoration: none;
}



::v-deep .tabTitle .el-input__inner {
  display: inline-block;
  width: 100px;
  height: 30px;
}

::v-deep .el-table .el-table__cell {
  text-align: center;
}

::v-deep .el-collapse-item__header {
  height: 50px;
  padding-left: 16px;

  font-size: 16px;
  background-color: #f2f2f2 !important;
}

::v-deep .el-form-item__content button:nth-child(1) {
  margin-left: 50px;
}

::v-deep .el-form-item__content button:nth-child(2) {
  margin-left: 20px;
}

.el-table th.el-table__cell>.cell {
  max-width: 0;
}

#chakanxianqing {
  background-color: white;
  margin: 0;
}

.el-pagination {
  padding: 14px 5px;
  text-align: center;
  margin-bottom: 20px;
}

a {
  text-decoration: none;
}

.btnbiao {
  margin-bottom: 30px;

}

.btnbiao span {
  margin-right: 20px;
}

.btnbiao button {
  height: 30px;
  padding: 6px 8px;
}
</style>
  